<template>
	<view class="uiwu">
		<view class="item" v-for="(item, index) in listData" :key="index" @tap.stop="selectItem(item)">
			<view class="name">{{ item.real_name }}<text>{{ item.phone }}</text></view>
			<view class="detail">{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}</view>
			<view class="tbn uiwu-flex-space">
				<label class="radio" @tap="setDefault(item)">
					<radio color="#EF821E" @tap.stop="setDefault(item)" :checked="item.is_default == 1" value="1" />
					<text>设为默认</text>
				</label>
				<view class="right uiwu-flex-align h-8">
					<view class="uiwu-flex-align" @tap.stop="editOpen(item)">
						<image src="/static/edit.png" mode="widthFix"></image>
						<text>编辑</text>
					</view>
					<view class="uiwu-flex-align" @tap.stop="TapDelelte(item, index)">
						<image src="/static/detle.png" mode="widthFix"></image>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <uiwu-popup-model v-if="showModel" v-model="showModel" @confirm="confirmDelete">
			<text>确认删除该地址吗？</text>
		</uiwu-popup-model> -->
		<uiwu-footer>
			<view class="uiwu-footer">
				<navigator hover-class="none" url="/pages/user/addAddress" class="uiwu-footer-box uiwu-flex-center">+
					新增收货地址</navigator>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
import { addresslist, delAddress, setAddress, uiwu } from '@/api/interface/interface';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { ref } from "vue";
const showModel = ref<boolean>(false);
const listData = ref<Array<object>>([]);
const items = ref<object>({})
const isSelect = ref(false);
const TapDelelte = (item: object, index: number): void => {
	items.value = item
	// showModel.value = true

	uni.showModal({
		title: "温馨提示",
		content: "确认删除该地址吗？",
		success(result) {
			if (result.confirm) {
				confirmDelete();
			}
		},
	});
}
const confirmDelete = async (): Promise<any> => {
	const data = await delAddress({ id: items.value.id });
	uiwu.toast('删除成功')
	showModel.value = false
	getListData()
}
const getListData = async (): void => {
	const { data } = await addresslist({});
	listData.value = data
}
/**
 * 设置默认收货地址
 */
const setDefault = async ({ id }): Promise<any> => {
	await setAddress({ id })
	uiwu.toast('设置成功')
	getListData()
}
const editOpen = (item: object): void => {
	uni.navigateTo({
		url: `/pages/user/addAddress?data=${JSON.stringify(item)}`
	})
}
const selectItem = (item): void => {
	if (!isSelect.value) return
	uni.$emit('changeAddress', item)
	uni.navigateBack()
}
onLoad(({ select }) => {
	isSelect.value = select ? true : false
})
onShow(() => {
	getListData()
})
</script>

<style lang="scss">
page {
	background-color: #F6F6F6;
}

.uiwu {
	padding-top: 20rpx;
}

.item {
	background-color: #fff;
	padding: 24rpx 32rpx;
	margin-bottom: 20rpx;

	.name {
		font-size: 32rpx;
		font-weight: bold;
		color: #231815;

		text {
			font-size: 28rpx;
			font-weight: 500;
			margin-left: 20rpx;
		}
	}

	.detail {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		padding: 15rpx 0 24rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}

	.tbn {
		.radio {
			radio {
				transform: scale(0.8);
			}

			text {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			}
		}

		.right {
			view {
				margin-left: 40rpx;
			}

			image {
				width: 32rpx;
				margin-right: 4rpx;
			}

			text {
				font-size: 26rpx;
				font-weight: 500;
				color: #444444;
			}
		}
	}
}

.uiwu-footer {
	width: 100%;
	padding: 19rpx 32rpx 5rpx;
	background-color: #fff;

	&-box {
		width: 100%;
		height: 80rpx;
		background: $qj-red;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
}
</style>